<template>
  <div class="field-info-container">
    <el-table
      row-key="prop"
      height="calc(100vh - 45px)"
      :tree-props="treeProps"
      :data="info.column">
      <el-table-column label="序号" type="index" width="50px"/>
      <el-table-column label="字段描述">
        <template slot-scope="scope">
          <el-input v-model="scope.row.label" readonly placeholder="字段描述"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="Java类型">
        <template slot-scope="scope">
          <el-select :disabled="scope.row.type === 'childForm'" v-model="scope.row.javaType">
            <el-option label="Long" value="Long"/>
            <el-option label="String" value="String"/>
            <el-option label="Integer" value="Integer"/>
            <el-option label="Double" value="Double"/>
            <el-option label="BigDecimal" value="BigDecimal"/>
            <el-option label="Date" value="Date"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="数据类型">
        <template slot-scope="scope">
          <el-select @change="changeDataType(scope.row)" filterable :disabled="scope.row.type === 'childForm'"
                     v-model="scope.row.dataType">
            <el-option v-for="(item, index) in dataTypes" :key="'dataTypes' + index" :label="item.label"
                       :value="item.value"/>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column label="长度">
        <template slot-scope="scope">
          <el-input :disabled="scope.row.type === 'childForm'" v-model="scope.row.dataLength" type="number"
                    placeholder="请输入数据长度"></el-input>
        </template>
      </el-table-column>
      <el-table-column label="新增显示">
        <template slot-scope="scope">
          <el-checkbox :disabled="scope.row.type === 'childForm'" true-label="1" false-label="0"
                       v-model="scope.row.isAdd"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="修改只读">
        <template slot-scope="scope">
          <el-checkbox :disabled="scope.row.type === 'childForm'" true-label="1" false-label="0"
                       v-model="scope.row.editReadonly"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="修改显示">
        <template slot-scope="scope">
          <el-checkbox :disabled="scope.row.type === 'childForm'" true-label="1" false-label="0"
                       v-model="scope.row.isEdit"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="列表">
        <template slot-scope="scope">
          <el-checkbox :disabled="scope.row.type === 'childForm'" true-label="1" false-label="0"
                       v-model="scope.row.isList"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="查询">
        <template slot-scope="scope">
          <el-checkbox :disabled="scope.row.type === 'childForm'" true-label="1" false-label="0"
                       v-model="scope.row.isQuery"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="导入">
        <template slot-scope="scope">
          <el-checkbox :disabled="scope.row.type === 'childForm'" true-label="1" false-label="0"
                       v-model="scope.row.isImport"></el-checkbox>
        </template>
      </el-table-column>
      <el-table-column label="查询方式">
        <template slot-scope="scope">
          <el-select :disabled="scope.row.type === 'childForm'" v-model="scope.row.queryType">
            <el-option label="等于" value="eq"/>
            <el-option label="模糊" value="like"/>
            <el-option disabled label="不等于" Number  value="ne"/>
            <el-option disabled label="大于" value="gt"/>
            <el-option disabled label="大于等于" value="ge"/>
            <el-option disabled label="小于" value="lt"/>
            <el-option disabled label="小于等于" value="le"/>
            <el-option disabled label="包含" value="in"/>
            <el-option disabled label="为空" value="isNull"/>
            <el-option disabled label="不为空" value="isNotNull"/>
            <el-option disabled label="两端" value="between"/>
            <el-option disabled label="非两端" value="notBetween"/>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import dataTypes from "@/views/toolkit/form/dataTypes";

export default {
  name: "FieldInfo",
  data() {
    return {
      dataTypes: dataTypes.data,
      treeProps: {
        children: "column",
        hasChildren: "hasChildren"
      }
    }
  },
  props: {
    info: {
      type: Object,
      default() {
        return {
          column: []
        }
      }
    }
  },
  watch: {
    "info.column": {
      deep: true,
      immediate: true,
      handler() {
        // let list = this.info.column;
        // list = list.map(map => {
        //   if(map.type === 'inputNumber') {
        //     map.javaType = 'BigDecimal'
        //     map.dataType = 'decimal'
        //     map.plugin.precision = 8
        //     map.dataLength = 30
        //   }
        //   return {
        //     map
        //   }
        // })
      }
    }
  },
  methods: {
    changeDataType(item) {
      switch (item.dataType) {
        case "int":
          this.$set(item, 'javaType', 'Integer')
          break
        case "bigint":
          this.$set(item, 'javaType', 'Long')
          break
        case "date":
          this.$set(item, 'javaType', 'Date')
          break
        case "double":
          this.$set(item, 'javaType', 'Double')
          break
        case "decimal":
          this.$set(item, 'javaType', 'BigDecimal')
          break
        default:
          this.$set(item, 'javaType', 'String')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.field-info-container {
  height: calc(100vh - 45px);
  overflow-y: auto;
}
</style>
